<template>
  <view class="container">
    <uni-nav-bar 
      dark 
      :fixed="true" 
      shadow 
      status-bar 
      left-icon="arrow-left" 
      title="客户欠费明细" 
      @clickLeft="back" 
    />
    <view class="main-content" style="padding-top: 15px;">
      <view class="card-container">
        <view class="card-list">
          <view 
            class="data-card" 
            v-for="(item, index) in tableData" 
            :key="'data-' + index + item.khName + item.hj"
          >
            <view class="card-header">
              <view class="customer-name">
                <text class="label">客户名称：</text>
                <text class="value">{{ item.khName || '未知客户' }}</text>
              </view>
              <view class="major">
                <text class="label">专业及产品：</text>
                <text class="value">{{ item.zy || '无' }}/{{ item.cp || '无' }}</text>
              </view>
			  <view class="major">
			    <text class="label">业务关系码：</text>
			    <text class="value">{{ item.gxm || '无' }}</text>
			  </view>
            </view>
            <view class="card-body">
              <view class="fee-item">
                <text class="fee-label">期内欠费：</text>
                <text class="fee-value">{{ formatAmount(item.qnqf) }}</text>
              </view>
              <view class="fee-item">
                <text class="fee-label">逾期欠费：</text>
                <text class="fee-value">{{ formatAmount(item.yqqf) }}</text>
              </view>
              <view class="fee-item">
                <text class="fee-label">合计：</text>
                <text class="fee-value">{{ formatAmount(item.hj) }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="no-data" v-if="tableData.length === 0">
          <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
          <text class="no-data-text">暂无相关欠费数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import utils from '../../common/utils'

export default {
  data() {
    return {
      tableData: [],
      navBarHeight: 0,
      jstj:'',
      params: {
        khCode: '',
        jg: ''
      }
    };
  },
  onLoad(options) {
    console.info("接收请求参数：", JSON.stringify(options));
    if (options) {
      this.params.khCode = decodeURIComponent(options.khCode || '');
      this.params.jg = decodeURIComponent(options.jg || '');
      this.jstj = decodeURIComponent(options.customerName || '');
    } else {
      console.error("未获取到请求参数");
    }
    this.calculateLayout();
    uni.onWindowResize(this.calculateLayout);
    this.initPage();
  },
  onUnload() {
    uni.offWindowResize(this.calculateLayout);
  },
  methods: {
    formatAmount(num) {
      if (num === null || num === undefined || isNaN(Number(num))) {
        return '0.00';
      }
      return Number(num).toFixed(2);
    },
    back() {
      console.info("this.jstj:"+this.jstj);    
      uni.navigateTo({
        url: `/pages/khkb/khkb?customerName=${encodeURIComponent(this.jstj)}`
      });
    },
    calculateLayout() {
      const sysInfo = uni.getSystemInfoSync();
      this.navBarHeight = sysInfo.statusBarHeight + 44;
    },
    initPage: async function () {
      this.$utils.showLoading("数据加载中...");
      try {
        const timestamp = this.$utils.getTimestamp();
        const userInfo = uni.getStorageSync("userInfo");
        const enData = this.$utils.encrypt(
          JSON.stringify({
            timestamp,
            kh_code: this.params.khCode,
            jg: this.params.jg
          }),
          userInfo.aesKey,
          userInfo.aesIv
        );
        const res = await this.$myRequest.post_token(
          getApp().globalData.khkbDetail,
          { data: enData + "" }
        );
        this.$utils.hideLoading();
        if (res.code === 200) {
          const decryptedData = JSON.parse(utils.decrypt(
            res.data,
            userInfo.aesKey,
            userInfo.aesIv
          ));
          console.info("解密后数据：", JSON.stringify(decryptedData));
          this.tableData = decryptedData.vwCwqfListInfo || [];
          if (this.tableData.length > 0) {
            uni.setNavigationBarTitle({
              title: `${this.tableData[0].khName} - 欠费明细`
            });
          }
        } else {
          this.$utils.toast(`数据加载失败！错误码[${res.code}]`);
        }
      } catch (e) {
        this.$utils.hideLoading();
        console.error("数据加载异常：", e);
        this.$utils.toast("数据加载失败！" + (e.message || "网络异常"));
      }
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f7f8fa;
}

.main-content {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
}

.card-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 20px 0;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 20px 15px;
}

.customer-name, .major {
  display: flex;
  align-items: center;
  font-size: 15px;
  width: 100%;
}

/* 冒号对齐：固定标签宽度+右对齐 */
.label, .fee-label {
  color: #666;
  margin-right: 5px;
  white-space: nowrap;
  width: 100px;
  text-align: right;
}

.value {
  color: #333;
  font-weight: 500;
  flex: 1;
}

/* 费用项布局：标签固定宽度，数值占剩余空间并靠右 */
.fee-item {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px;
}

/* 金额强制靠右 */
.fee-value {
  color: #333;
  font-weight: 500;
  flex: 1; /* 占满剩余宽度 */
  text-align: left; /* 强制右对齐 */
  padding-left: 2px; /* 与标签保持距离 */
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  gap: 15px;
}

.no-data-text {
  font-size: 14px;
}

.card-container::-webkit-scrollbar {
  width: 6px;
}

.card-container::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.card-container::-webkit-scrollbar-track {
  background-color: transparent;
}

@media (max-width: 375px) {
  .card-header {
    padding: 12px 15px 0;
  }
  .card-body {
    padding: 8px 15px 12px;
  }
  .customer-name, .major, .fee-item {
    font-size: 14px;
  }
  .label, .fee-label {
    width: 90px;
  }
}
</style>